<template>
  <div class="Music">
    <h3>Music</h3>
    <!-- params传值 -->
    <!-- 声明式导航 -->
    <router-link  to="/Home/Music/MusicDetail/1/20">周杰伦</router-link>
    <router-link to="/Home/Music/MusicDetail/2/30">林俊杰</router-link>
    <router-link to="/Home/Music/MusicDetail/3/25">陈奕迅</router-link>

    <!-- 编程式导航  path 和 params 不能同时使用 -->
    <!-- 书写了params配置项,则不能再使用path配置项,只能使用name配置项 -->
    <button
      @click="
        $router.push({
          // path: '/Home/Music/MusicDetail',
          name: 'MusicDetail',
          params: {
            id: '1',
            age: '20',
          },
        }).catch(()=>{})
      "
    >
      周杰伦
    </button>
    <button
      @click="
        $router.push({
          //path: '/Home/Music/MusicDetail',
          name: 'MusicDetail',
          params: {
            id: '2',
            age: '20',
          },
        }).catch(()=>{})
      "
    >
      林俊杰
    </button>
    <button
      @click="
        $router.push({
          //path: '/Home/Music/MusicDetail',
          name: 'MusicDetail',
          params: {
            id: '3',
            age: null,
          },
        }).catch(()=>{})
      "
    >
      陈奕迅
    </button>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Music",
};
</script>

<style scoped>
.Music {
  background-color: rgb(163, 198, 178);
}
</style>